<template>
  <div class="app-container">
    <!-- 商品详情内容 -->
    <Details 
      :detailData="detailData" 
      :relatedGoods="relatedGoods" 
      :hotGoods="hotGoods" 
      :visitCount="visitCount"
      :types="1"
    />
    <h2>You might also like</h2>
    <Also :relatedGoods="relatedGoods" :imageWidth="305" :imageHeight="410"  />
    <h2>Products viewed recently</h2>
    <Also :relatedGoods="tabsList" :imageWidth="305" :imageHeight="410"  />
    <!-- <Recently :tabsList="tabsList"/> -->
    <!-- <h2>Reviews</h2> -->
    <div class="reviews-container" style="border-bottom: 1px solid #e8e8e8;"></div>
    <Reviews  :goodsComments="goodsComments"/>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import Details from "./components/details.vue"
import Reviews from "./components/reviews.vue"
import Recently from "./components/recently.vue"
import Also from './components/also.vue'
import { getDetail, getEvaluatelist, addVisit } from "@/api/details";
import { useCartStore } from '@/store/cart'
import { BrowsingHistoryAdapter } from '@/utils/cache';

const visitCount = ref(0)
const cartStore = useCartStore()
const route = useRoute()
// const id = ref()
const detailData = ref()
const tabsList = ref([])
const recommendList = ref([])
const goodsComments = ref([])
const relatedGoods = ref([])
const hotGoods = ref([])
const browsingHistory = ref([])

const getDetailData = async () => {
  const productdetails = (window as any).__INITIAL_PRODUCT__.productdetails
  detailData.value = productdetails.goods_detail // 商品详情
  goodsComments.value = productdetails.goods_comments // 评论
  relatedGoods.value = productdetails.related_goods // 相关商品
  hotGoods.value = productdetails.hot_goods // 热门商品
  // const res = await getDetail(185)
  // detailData.value = res.result.goods_detail // 商品详情
  // goodsComments.value = res.result.goods_comments // 评论
  // relatedGoods.value = res.result.related_goods // 相关商品
  // hotGoods.value = res.result.hot_goods // 热门商品

  console.log('detailData.value', detailData.value)
  // 添加到浏览历史
  if (detailData.value) {
    const historyItem = {
      id: detailData.value.id,
      name: detailData.value.name,
      price: detailData.value.min_price || detailData.value.price,
      max_price: detailData.value.max_price || detailData.value.price,
      image: detailData.value.image || detailData.value.images?.[0],
      images: detailData.value.images,
      viewedDate: new Date().toISOString(),
      date: new Date().toLocaleDateString(),
      url:detailData.value.url
    };
    console.log('historyItem', historyItem)
    // 使用 BrowsingHistoryAdapter 添加记录
    BrowsingHistoryAdapter.add(historyItem);
  }
  
  // 加载浏览历史
  loadBrowsingHistory();
}

// 加载浏览历史数据
const loadBrowsingHistory = () => {
  browsingHistory.value = BrowsingHistoryAdapter.getAll();
  console.log('浏览历史:', browsingHistory.value);
  // 更新最近浏览的商品列表
  tabsList.value = browsingHistory.value;
  console.log('tabsList.value', tabsList.value)
};

// 清空浏览记录
const clearHistory = () => {
  BrowsingHistoryAdapter.clear();
  loadBrowsingHistory();
}

//浏览量
const getAddVisit = async () => {
  const res = await addVisit({id: detailData.value.id})
  if (res.code == 200) {
    visitCount.value = res.result.visit
  }
}

watch(() => route.path, (newValue, oldValue) => {
  window.location.reload()
  getAddVisit()
})

onMounted(() => {
  getDetailData();
  getAddVisit();
})
</script>

<style lang="scss" scoped>
.app-container {
  max-width: 1700px;
  margin: 0 auto;
  // height: 100vh;

  // overflow-y: scroll;
  // 不显示滚动条
  &::-webkit-scrollbar {
    display: none;
  }
 
  // background-color: #f5f5f5;
}
.recommend{
  max-width: 1250px; margin: 0 auto; padding-left: 0px;
  //margin-bottom: 50px;
  .product-title {
    font-size: 26px;
    font-weight: 800;
    margin: 20px 0;
  }
  
}
.reviews-container{
    color: rgba(0, 0, 0, 1);
    font-size: 20px;
    line-height: 1.5;
    font-weight: 500;
    margin-top: 20px;
  // border-bottom: 1px solid #e8e8e8;
  padding-bottom: 10px;
  }
 
</style>
